<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.事件参数</title>
    <style>
        .a {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        .b {
            width: 400px;
            height: 400px;
            background-color: green;
        }

        .c {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- <button id="btnNode">点击</button> -->
    <div class="a" id="a">
        <div class="b" id="b">
            <div class="c" id="c"></div>
        </div>
    </div>
    <hr>
    <!-- 跳转时a标签的默认行为  如果不希望其有默认行为 -->
    <a href="http://www.baidu.com" id="aNode">百度</a>

    <script>
        /*
        事件参数：
           stopPropagation(): 取消冒泡行为
           preventDefault() 取消默认行为

        */
        // btnNode.onclick = function(e) {
        //     console.log(e.clientX,e.clientY);
        // }
        var divNodes = document.querySelectorAll("div");
        Array.from(divNodes).forEach(function(divNode){
            divNode.onclick = function(e) {
                // 取消事件的冒泡行为
                e.stopPropagation();
                // console.log(this.id);
            }
        })

        aNode.onclick = function(e) {
            e.preventDefault()
            // alert(1);
            // 取消其默认行为
            // return false;
        }
    </script>

</body>

</html>